<template>
  <div class="father">
    <div class="card">
      <el-row :gutter="5" type="flex">
        <el-col :span="12">
          <el-card shadow="never" style="height: 100%">
            <div class="card-header">
              <span>用户输入</span>
            </div>
            <!-- 项目基本信息 -->
            <div class="mod">
              <div class="form-head">
                <span>项目基本信息</span>
                <el-button @click="btnclick" class="btn">提交</el-button>
              </div>
              <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>项目名称</div>
                      <input v-model="state.info.name" placeholder="请输入" />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="icon">
                      <span>图片上传</span>
                      <div>
                        <el-upload
                          v-model:file-list="fileList1"
                          :auto-upload="true"
                          action="http://47.94.22.162:3085/OaDeviceController/uploads"
                          class="upload-demo"
                          :on-success="imgupload"
                          :limit="2"
                          :on-remove="handleRemove1"
                          :on-change="cg1"
                          :show-file-list="true"
                        >
                          <div class="iconfont icon-yunshangchuan_o">上传</div>
                        </el-upload>
                      </div>
                      <el-image
                        style="width: 50px; height: 50px"
                        :src="`${state.info.img}`"
                        fit="fill"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>项目地址</div>
                      <input
                        v-model="state.info.address"
                        placeholder="请输入"
                      />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <div class="inputform">
                      <div style="margin-left: 180px">竣工日期</div>
                      <el-date-picker
                        :disabled-date="disabledDate"
                        v-model="state.info.time"
                        type="date"
                        placeholder="请选择竣工日期"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <div class="inputform">
                      <div>建筑面积</div>
                      <input
                        v-model="state.info.area"
                        placeholder="请输入"
                        @blur="areaChage"
                      />
                    </div>
                  </el-col>
                  <el-col :span="14">
                    <el-row>
                      <el-col :span="10">
                        <div class="inputformbr">
                          <div style="margin-left: 30px">其中，地上</div>
                          <input v-model="state.info.up" placeholder="请输入" />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">地下</div>
                          <input
                            placeholder="请输入"
                            v-model="state.info.down"
                          />
                        </div>
                      </el-col>
                      <el-col :span="7"></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10">
                        <div class="inputformbr">
                          <div style="margin-left: 30px">其中，办公</div>
                          <input
                            v-model="state.info.office"
                            placeholder="请输入"
                          />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">商场</div>
                          <input
                            placeholder="请输入"
                            v-model="state.info.shop"
                          />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">公寓</div>
                          <input
                            v-model="state.info.home"
                            placeholder="请输入"
                          />
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="10" class="car">
                        <div class="inputformbr">
                          <div style="margin-left: 30px">车库</div>
                          <input
                            v-model="state.info.garage"
                            placeholder="请输入"
                          />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <div style="padding-left: 10px">酒店</div>
                          <input
                            placeholder="请输入"
                            v-model="state.info.hotel"
                          />
                        </div>
                      </el-col>
                      <el-col :span="7">
                        <div class="inputformbr">
                          <!-- <span style="margin-left: 10px; font-size: 14px">(</span> -->
                          <div style="padding-left: 10px">( 星级</div>
                          <input
                            v-model="state.info.level"
                            placeholder="请输入"
                            style="width: 60px"
                          />
                          <span style="font-size: 14px"> )</span>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div class="crux">
                  <span style="font-size: 14px">关键文件上传</span>
                  <div style="margin-left: 150px">
                    <el-upload
                      :file-list="fileList"
                      :auto-upload="true"
                      ref="upfile"
                      action="http://47.94.22.162:3085/OaDeviceController/ceshiFile"
                      class="upload-demo"
                      :on-success="fileupload"
                      :on-progress="handleProgress"
                      :on-error="fileError"
                      :show-file-list="true"
                      :limit="10"
                    >
                      <!-- :on-remove="handleRemove" -->
                      <!-- :multiple="true" -->
                      <!-- :on-change="cg" -->
                      <div class="iconfont icon-yunshangchuan_o">
                        上传<span class="yunshangchuan-msg"
                          >(上传文件最大不超过100M)</span
                        >
                      </div>
                    </el-upload>
                  </div>
                </div>
                <!-- <el-form-item class="textareas">
                  <div class="inputs">
                    <span
                      @click="state.info.text = ''"
                      class="iconfont icon-shanchu"
                    ></span>
                    <el-input v-model="state.info.text" type="textarea" />
                  </div>
                </el-form-item> -->
                <!-- <el-card  class="textareas" @click="">
                  <div v-for="(item,index) in state.info.file" :key="item" class="fileItem">
                    <span>
                      {{item.file}}&nbsp;&nbsp;------&nbsp;&nbsp;{{item.uploadFile.split('/').at(-1)}}
                    </span>
                    <el-popconfirm title="是否删除?" @confirm="delFile(index)">
                      <template #reference>
                        <span class="iconfont icon-shanchu"></span>
                      </template>
                    </el-popconfirm>
                    
                  </div>
                </el-card> -->
                <el-table
                  class="el-table-file"
                  :data="state.info.file"
                  stripe
                  border
                >
                  <el-table-column label="文件名">
                    <template #default="scope">
                      <div>
                        <el-input v-model="scope.row.desc"></el-input>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="file"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column prop="time" label="上传日期">
                    <template #default="scope">
                      <div>{{ scope.row.time }}</div>
                      <!-- 
                      <div>
                        {{
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(0, 4) +
                          "-" +
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(4, 6) +
                          "-" +
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(6, 8) +
                          " " +
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(8, 10) +
                          ":" +
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(10, 12) +
                          ":" +
                          scope.row.uploadFile
                            .split(".")[0]
                            .split("\/")
                            .at(-1)
                            .slice(12, 14)
                        }}
                      </div>
                     -->
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <div>
                        <el-popconfirm
                          title="是否删除?"
                          @confirm="delFile(scope.$index)"
                        >
                          <template #reference>
                            <el-button icon="Delete" circle />
                          </template>
                        </el-popconfirm>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <el-divider />
            <!-- 能源费率 -->
            <div class="mod">
              <div class="form-head">
                <span>能源费率</span>
                <el-button @click="nengclick" class="btn">提交</el-button>
              </div>
              <el-form :inline="true" :model="energy">
                <!-- 夏季电价 -->
                <div class="energy">
                  <div class="energy_form">
                    <p>夏季</p>
                    <div>
                      <el-form-item class="date" label="日期">
                        <el-date-picker
                          :disabled-date="disabledDate"
                          v-model="energy.sumdate"
                          end-placeholder="结束日期"
                          range-separator="至"
                          start-placeholder="开始日期"
                          type="daterange"
                        />
                      </el-form-item>
                    </div>
                    <div class="summer">
                      <el-row>
                        <el-col :span="16">
                          <div class="rmb">
                            <div>电价RMB/kWh</div>
                            <div>
                              <input
                                v-model="state.nengdata.electric.peak"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(峰)</span>
                            </div>
                            <div>
                              <input
                                v-model="state.nengdata.electric.flat"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(平)</span>
                            </div>
                            <div>
                              <input
                                v-model="state.nengdata.electric.valley"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(谷)</span>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="color">
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #f79646;
                                "
                              ></div>
                              <div>峰</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #0070c0;
                                "
                              ></div>
                              <div>平</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #d6ebfa;
                                "
                              ></div>
                              <div>谷</div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="day">
                        <div
                          v-for="(i, index) in state.nengdata.shidata"
                          :key="index"
                        >
                          <span
                            v-if="i.state === 2"
                            class="hour1"
                            @click="qie(i)"
                            >{{ i.date }}</span
                          >
                          <span
                            v-if="i.state === 1"
                            class="hour"
                            @click="qie(i)"
                            >{{ i.date }}</span
                          >
                          <span
                            v-if="i.state === 3"
                            class="hour2"
                            @click="qie(i)"
                            >{{ i.date }}</span
                          >
                        </div>
                        <div class="shi">时</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 非夏季电价 -->
                <div class="energy">
                  <el-form
                    :inline="true"
                    :model="state.nengdata.electric1"
                    class="energy_form"
                  >
                    <p>非夏季</p>
                    <div>
                      <el-form-item class="date" label="日期">
                        <el-date-picker
                          :disabled-date="disabledDate"
                          v-model="state.nengdata.date"
                          end-placeholder="结束日期"
                          range-separator="至"
                          start-placeholder="开始日期"
                          type="daterange"
                        />
                      </el-form-item>
                    </div>
                    <div class="summer">
                      <el-row>
                        <el-col :span="16">
                          <div class="rmb">
                            <div>电价RMB/kWh</div>
                            <div>
                              <input
                                v-model="state.nengdata.electric1.peak"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(峰)</span>
                            </div>
                            <div>
                              <input
                                v-model="state.nengdata.electric1.flat"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(平)</span>
                            </div>
                            <div>
                              <input
                                v-model="state.nengdata.electric1.valley"
                                placeholder="请输入"
                                style="width: 55px"
                              />
                              <span>(谷)</span>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="8">
                          <div class="color">
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #f79646;
                                "
                              ></div>
                              <div>峰</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #0070c0;
                                "
                              ></div>
                              <div>平</div>
                            </div>
                            <div class="fpg">
                              <div
                                style="
                                  width: 12px;
                                  height: 12px;
                                  background: #d6ebfa;
                                "
                              ></div>
                              <div>谷</div>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <div class="day">
                        <div
                          v-for="(i, index) in state.nengdata.shidata1"
                          :key="index"
                        >
                          <span
                            v-if="i.state === 2"
                            class="hour1"
                            @click="qie1(i)"
                            >{{ i.date }}</span
                          >
                          <span
                            v-if="i.state === 1"
                            class="hour"
                            @click="qie1(i)"
                            >{{ i.date }}</span
                          >
                          <span
                            v-if="i.state === 3"
                            class="hour2"
                            @click="qie1(i)"
                            >{{ i.date }}</span
                          >
                        </div>
                        <div class="shi">时</div>
                      </div>
                    </div>
                  </el-form>
                </div>
                <!-- <div>
									<el-row>
										<el-col :span="9">
											<div class="inputformbr">
												<div>电价RMB/kWh(去年平均)</div>
												<input placeholder="请输入" />
											</div>
										</el-col>
										<el-col :span="6">
											<div class="inputformbr">
												<div>天然气RMB/m³</div>
												<input
													placeholder="请输入"
													style="width: 60px"
												/>
											</div>
										</el-col>
										<el-col :span="9">
											<div class="inputformbr">
												<div>市政热源单价RMB/kWh</div>
												<input placeholder="请输入" />
											</div>
										</el-col>
									</el-row>
								</div> -->
              </el-form>
            </div>
            <!-- 入住率 -->
            <div class="mod">
              <div class="form-head">
                <span>入住率</span>
                <el-button @click="ruzhu" class="btn">提交</el-button>
              </div>
              <el-form>
                <el-form-item label="2021年（月份）">
                  <ProjectForm :tableData="state.tableData"></ProjectForm>
                </el-form-item>
                <el-form-item label="2022年（月份）">
                  <ProjectForm :tableData="state.tableData1"></ProjectForm>
                </el-form-item>
              </el-form>
            </div>
            <!-- 维修量 -->
            <div class="mod">
              <div class="form-head">
                <span>维修量（仅冷热站，单位：次）</span>
                <el-button @click="weixiu" class="btn">提交</el-button>
              </div>
              <el-form>
                <el-form-item label="2021年（月份）">
                  <ProjectForm :tableData="state.tableData2"></ProjectForm>
                </el-form-item>
                <el-form-item label="2022年（月份）">
                  <ProjectForm
                    :tableData="state.tableData3"
                  ></ProjectForm> </el-form-item
              ></el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" style="height: 100%">
            <div class="card-white"></div>
            <!-- 项目需求 -->
            <div class="mod" style="padding-bottom: 24px">
              <div class="form-head">
                <span>项目需求</span>
                <el-button class="btn" @click="add = true">新增</el-button>
              </div>
              <el-table
                height="200"
                class="eltab"
                :data="project"
                :header-cell-style="{ color: '#333' }"
                border
                style="width: 100%,margin-bottom: 20px"
              >
                <el-table-column label="序号" type="index" width="60">
                </el-table-column>
                <el-table-column label="时间" prop="time" width="120">
                  <template #default="scope">
                    <input v-model="scope.row.time" />
                  </template>
                </el-table-column>
                <el-table-column label="需求内容" prop="need" width="260">
                  <template #default="scope">
                    <input v-model="scope.row.need" />
                  </template>
                </el-table-column>
                <el-table-column label="签名" prop="signname">
                  <template #default="scope">
                    <input v-model="scope.row.signname" />
                  </template>
                </el-table-column>
                <el-table-column label="级别" prop="level">
                  <template #default="scope">
                    <input v-model="scope.row.level" />
                  </template>
                </el-table-column>
                <el-table-column label="确认" prop="confirm">
                  <el-button
                    @click="quren"
                    :icon="ArrowRight"
                    circle
                    style="color: #f79646; background: #eaf2fa; border: #eaf2fa"
                  />
                </el-table-column>
              </el-table>
            </div>
            <!-- 相关人员联系方式 -->
            <div class="mod" style="padding-bottom: 24px">
              <div class="form-head">
                <span>相关人员联系方式</span>
                <el-button @click="xiangguan" class="btn">提交</el-button>
              </div>
              <el-table
                :data="state.personnel"
                :header-cell-style="{ color: '#333' }"
                border
                style="width: 100%"
              >
                <el-table-column label="序号" prop="id" width="60">
                  <template #default="scope">
                    <input v-model="scope.row.id" />
                  </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name">
                  <template #default="scope">
                    <input v-model="scope.row.name" />
                  </template>
                </el-table-column>
                <el-table-column label="职位" prop="position">
                  <template #default="scope">
                    <input v-model="scope.row.position" />
                  </template>
                </el-table-column>
                <el-table-column label="工作职责" prop="duty">
                  <template #default="scope">
                    <input v-model="scope.row.duty" />
                  </template>
                </el-table-column>
                <el-table-column label="手机" prop="phone" width="120">
                  <template #default="scope">
                    <input v-model="scope.row.phone" />
                  </template>
                </el-table-column>
                <el-table-column label="电邮" prop="email">
                  <template #default="scope">
                    <input v-model="scope.row.email" />
                  </template>
                </el-table-column>
                <el-table-column label="倒班情况" prop="shift">
                  <template #default="scope">
                    <input v-model="scope.row.shift" />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="dialogs userDialog">
        <el-dialog v-model="add" destroy-on-close title="新建项目" width="30%">
          <div class="line4"></div>
          <el-form ref="fm" :model="sta.addform" :rules="rules">
            <el-form-item label="时间" prop="time">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="sta.addform.time"
                type="date"
                class="datepicker"
                placeholder="请选择日期"
              />
            </el-form-item>
            <el-form-item label="内容" prop="need">
              <el-input
                v-model="sta.addform.need"
                autocomplete="off"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="签名" prop="signname">
              <el-input
                v-model="sta.addform.signname"
                autocomplete="off"
                placeholder="请输入签名"
              />
            </el-form-item>
            <el-form-item label="级别" prop="level">
              <el-select v-model="sta.addform.level" placeholder="选择级别">
                <el-option label="一级" value="一级" />
                <el-option label="二级" value="二级" />
                <el-option label="三级" value="三级" />
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="add = false" class="cancel">取消</el-button>
              <el-button type="primary" @click="addproject(fm)" class="save"
                >保存</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  UserInfosub,
  UserEdit,
  // UserRateSub,
  // UserCheckinSub,
  // UserRepairSub,
  // UserDemandSub,
  // UserContactSub,
  inuserput,
} from "@/api/model/login";
import { ArrowRight } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

import { reactive, ref, onMounted, toRaw } from "vue";
import ProjectForm from "./projectForm.vue";

const fileList = ref([]);
const fileList1 = ref([]);
let add = ref(false);
let fm = ref(null);
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
let sta = reactive({
  addform: {},
});
const fileError = (e) => {
  console.log(e, 762);
};
let upfile = ref(null);
let id = ref(1);
// 项目基本信息
const form = reactive({
  name: "",
  address: "",
  endtime: "",
  area: "",
  landup: "",
  landdown: "",
  work: "",
  shopping: "",
  apartment: "",
  garage: "",
  hotel: "",
  star: "",
  desc: ""
});

let currentFile = ref("");

// 能源费率
const energy = reactive({
  sumdate: "",
  feng: "",
  ping: "",
  gu: "",
  electricityPrice: "",
  gas: "",
  govhot: "",
});
let state = reactive({
  info: {
    area: 64475,
    file: [],
  },
  nengdata: {
    shidata: [
      {
        date: 1,
        state: 1,
      },
      {
        date: 2,
        state: 1,
      },
      {
        date: 3,
        state: 1,
      },
      {
        date: 4,
        state: 1,
      },
      {
        date: 5,
        state: 1,
      },
      {
        date: 6,
        state: 1,
      },
      {
        date: 7,
        state: 1,
      },
      {
        date: 8,
        state: 1,
      },
      {
        date: 9,
        state: 1,
      },
      {
        date: 10,
        state: 1,
      },
      {
        date: 11,
        state: 1,
      },
      {
        date: 12,
        state: 1,
      },
      {
        date: 13,
        state: 1,
      },
      {
        date: 14,
        state: 1,
      },
      {
        date: 15,
        state: 1,
      },
      {
        date: 16,
        state: 1,
      },
      {
        date: 17,
        state: 1,
      },
      {
        date: 18,
        state: 1,
      },
      {
        date: 19,
        state: 1,
      },
      {
        date: 20,
        state: 1,
      },
      {
        date: 21,
        state: 1,
      },
      {
        date: 22,
        state: 1,
      },
      {
        date: 23,
        state: 1,
      },
      {
        date: 24,
        state: 1,
      },
    ],
    shidata1: [
      {
        date: 1,
        state: 1,
      },
      {
        date: 2,
        state: 1,
      },
      {
        date: 3,
        state: 1,
      },
      {
        date: 4,
        state: 1,
      },
      {
        date: 5,
        state: 1,
      },
      {
        date: 6,
        state: 1,
      },
      {
        date: 7,
        state: 1,
      },
      {
        date: 8,
        state: 1,
      },
      {
        date: 9,
        state: 1,
      },
      {
        date: 10,
        state: 1,
      },
      {
        date: 11,
        state: 1,
      },
      {
        date: 12,
        state: 1,
      },
      {
        date: 13,
        state: 1,
      },
      {
        date: 14,
        state: 1,
      },
      {
        date: 15,
        state: 1,
      },
      {
        date: 16,
        state: 1,
      },
      {
        date: 17,
        state: 1,
      },
      {
        date: 18,
        state: 1,
      },
      {
        date: 19,
        state: 1,
      },
      {
        date: 20,
        state: 1,
      },
      {
        date: 21,
        state: 1,
      },
      {
        date: 22,
        state: 1,
      },
      {
        date: 23,
        state: 1,
      },
      {
        date: 24,
        state: 1,
      },
    ],
    date: "",
    date1: "",
    electric: {
      peak: "",
      flat: "",
      valley: "",
    },
    electric1: {
      peak: "",
      flat: "",
      valley: "",
    },
  },

  tableData: [
    {
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  tableData1: [
    {
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  tableData2: [
    {
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  tableData3: [
    {
      one: "",
      two: "",
      three: "",
      four: "",
      five: "",
      six: "",
      seven: "",
      eight: "",
      nine: "",
      ten: "",
      eleven: "",
      twelve: "",
    },
  ],

  personnel: [
    {
      id: "1",
      name: "",
      position: "",
      duty: "",
      phone: "",
      email: "",
      shift: "",
    },
    {
      id: "2",
      name: "",
      position: "",
      duty: "",
      phone: "",
      email: "",
      shift: "",
    },
    {
      id: "3",
      name: "",
      position: "",
      duty: "",
      phone: "",
      email: "",
      shift: "",
    },
  ],
});
let datalist = reactive({});
const rules = reactive({
  time: [
    {
      type: "date",
      required: true,
      message: "选择日期",
      trigger: "change",
    },
  ],
  need: [{ required: true, message: "请输入内容", trigger: "blur" }],
  signname: [{ required: true, message: "请输入签名", trigger: "blur" }],
  level: [
    {
      required: true,
      message: "请选择级别",
      trigger: "change",
    },
  ],
});

// 项目需求
const project = ref([]);
// const downFile = () => {
//   window.open("http://oao.zhichengshangxin.com/" + state.info.file);
// };
const imgupload = (e) => {
  ElMessage.success("成功上传图片");
  
  state.info.img = e.date.url;
  fileList1.value.push({
    name: e.data.split("/").at(-1),
    url: e.date.url,
  });
};

const handleRemove1 = () => {
  fileList1.value = [];
};
const cg1 = (f, files) => {
  if (files) {
    fileList1.value = files.slice(-1);
  }
};
//输入面积后变化
const areaChage = () => {
  let area = state.info.area;
  localStorage.setItem("area", area);
};
onMounted(() => {
  let area = state.info.area;
  localStorage.setItem("area", area);
  getHui();
});
const filterBfb = (obj) => {
  for (let i in obj) {
    obj[i] = obj[i] + "%";
  }
  return obj;
};
const getHui = async () => {
  let res = await inuserput({ id: id.value });
  console.log(res.data.data.list[0].info, "Aaaaaaa");
  datalist = res.data.data.list[0];
  state.info = {...JSON.parse(res.data.data.list[0].info)};
  state.nengdata = JSON.parse(res.data.data.list[0].rate);
  state.tableData = JSON.parse(res.data.data.list[0].checkin)[0];
  state.tableData1 = JSON.parse(res.data.data.list[0].checkin)[1];
  filterBfb(state.tableData[0]);
  filterBfb(state.tableData1[0]);
  state.tableData2 = JSON.parse(res.data.data.list[0].repair)[0];
  state.tableData3 = JSON.parse(res.data.data.list[0].repair)[1];
  project.value = JSON.parse(res.data.data.list[0].demand);
  state.personnel = JSON.parse(res.data.data.list[0].contact);
  // state.info.file = [];
  // console.log(state.info);
};

const fileupload = (e) => {
  console.log(e, "成功上传");
  if (e.date.url) {
    state.info.file.push({
      desc: "",
      file: currentFile.value,
      uploadFile: e.date.url,
      time: dayjs().format("YYYY-MM-DD"),
    });
    fileList.value.push({
      name: e.date.fileName,
      url: e.date.url,
    });
    return ElMessage.success("成功上传文件");
  }
  return ElMessage.error("上传失败!");
};

// 文件列表删除回调
// const handleRemove = (file) => {
//   fileList.value = fileList.value.filter(item => item.name !== file.name);
//   state.info.file = state.info.file.filter(item => item.split("/").at(-1) !== file.name)
// };
// 文件列表改变回调
// const cg = (f, files) => {
//   console.log(f, files, '1231231');
//   if (files) {
//     fileList.value = files.slice(-1);
//     // fileRealList.value.value.push(files.slice(-1))
//   }
// };
// const bf = (file) => {
//   console.log(file,'bf');
//     return true;
// };

// 文件上传时的钩子
const handleProgress = (ev, file) => {
  currentFile.value = file.name;
};

// 删除文件
const delFile = (index) => {
  state.info.file.splice(index, 1);
};
// 项目基本信息
const btnclick = async () => {
  state.info.time = dayjs(state.info.time).format("YYYY-MM-DD");
  if (id.value != null) {
    console.log('====================================');
    console.log(JSON.stringify({ ...state.info }));
    console.log('====================================');
    const { data, status } = await UserEdit({
      ...datalist,
      info: JSON.stringify({ ...state.info }),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("info", JSON.stringify({ ...state.info }));
    let data = await UserInfosub(form);
    id.value = data.data.data;
    console.log('====================================');
    console.log(form);
    console.log('====================================');
    setTimeout(() => {
      getHui();
    }, 1000);
  }
};
// 能源费率
const nengclick = async () => {
  if (id.value != null) {
    const { data, status } = await UserEdit({
      ...datalist,
      rate: JSON.stringify(state.nengdata),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("rate", JSON.stringify({ ...state.nengdata }));
    let data = await UserInfosub(form);
    id.value = data.data.data;
    getHui();
    if (data.status === 200) ElMessage.success(data.msg);
  }
};

const ruzhu = async () => {
  if (id.value != null) {
    const { data, status } = await UserEdit({
      ...datalist,
      checkin: JSON.stringify([state.tableData, state.tableData1]),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("checkin", JSON.stringify([state.tableData, state.tableData1]));
    let data = await UserInfosub(form);
    id.value = data.data.data;
    getHui();
    if (data.status === 200) ElMessage.success(data.msg);
  }
};
const addproject = async (fm) => {
  if (!fm) return;
  await fm.validate(async (valid) => {
    if (valid) {
      sta.addform.time = dayjs(sta.addform.time).format("YYYY-MM-DD");
      project.value.push(toRaw(sta.addform));
      sta.addform = {};
      add.value = false;
    }
  });
};
const weixiu = async () => {
  if (id.value != null) {
    const { data, status } = await UserEdit({
      ...datalist,
      repair: JSON.stringify([state.tableData2, state.tableData3]),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("repair", JSON.stringify([state.tableData2, state.tableData3]));
    let data = await UserInfosub(form);
    //   let data = await UserInfosub({
    //   repair: JSON.stringify([state.tableData2, state.tableData3]),
    // });
    id.value = data.data.data;
    if (data.status === 200) ElMessage.success(data.msg);
  }
};

const qie = (e) => {
  if (e.state == 1) {
    state.nengdata.shidata[e.date - 1].state = 3;
  } else if (e.state == 2) {
    state.nengdata.shidata[e.date - 1].state = 1;
  } else if (e.state == 3) {
    state.nengdata.shidata[e.date - 1].state = 2;
  }
};
const qie1 = (e) => {
  console.log(e);
  if (e.state == 1) {
    state.nengdata.shidata1[e.date - 1].state = 3;
  } else if (e.state == 2) {
    state.nengdata.shidata1[e.date - 1].state = 1;
  } else if (e.state == 3) {
    state.nengdata.shidata1[e.date - 1].state = 2;
  }
};
const xiangguan = async () => {
  if (id.value) {
    const { data, status } = await UserEdit({
      ...datalist,
      contact: JSON.stringify(state.personnel),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("contact", JSON.stringify(state.personnel));
    let data = await UserInfosub(form);
    //    let data = await UserInfosub({
    //   contact: JSON.stringify(state.personnel),
    // });
    id.value = data.data.data;
    console.log(data);
    if (data.status === 200) ElMessage.success(data.data.message);
  }
};
const quren = async () => {
  if (id.value != null) {
    const { data, status } = await UserEdit({
      ...datalist,
      demand: JSON.stringify(project.value),
      id: id.value,
    });
    if (status === 200) ElMessage.success(data.message);
  } else {
    let form = new FormData();
    form.append("demand", JSON.stringify(project.value));
    let data = await UserInfosub(form);
    id.value = data.data.data;
    if (data.status === 200) ElMessage.success(data.msg);
  }
};
</script>

<style lang="less" scoped>
.userDialog {
  :deep(.el-dialog__title) {
    color: rgb(81, 99, 167);
    font-size: 19px;
  }

  :deep(.el-dialog__close) {
    font-size: 27px !important;
    color: rgb(81, 99, 167);
  }

  :deep(.el-dialog__body) {
    padding: 20px 0 20px;
  }
}

.dialog {
  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 20px;
  }

  /deep/.el-input__inner {
    -webkit-appearance: none;
    background-color: var(--el-input-bg-color, var(--el-color-white));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    border: var(--el-input-border, var(--el-border-base));
    box-sizing: border-box;
    color: var(--el-input-text-color, var(--el-text-color-regular));
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 32px;
    outline: 0;
    padding: 0 30px;
    transition: var(--el-transition-border);
    width: 230px;
  }
}

.dialogs {
  /deep/.el-dialog {
    --el-dialog-width: 410px;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: var(--el-color-white);
    --el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 20px;
    position: relative;
    margin: var(--el-dialog-margin-top, 15vh) auto 50px;
    background: var(--el-dialog-bg-color);
    border-radius: 8px;
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    width: var(--el-dialog-width, 410px);
  }

  /deep/.line4 {
    border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
  }

  /deep/.el-input {
    width: 200px;
  }

  .el-form {
    width: 246px;
    border-style: none;
    border-color: unset;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    padding-top: 20px;
    margin-left: 40px;
  }

  /deep/.el-input__inner {
    left: 870px;
    top: 428px;
    height: 30px;
    border-radius: 4px;
    color: rgba(204, 204, 204, 100);
    font-size: 14px;
    text-align: left;
    font-family: Microsoft Yahei;
    border: 1px solid rgba(204, 204, 204, 100);
    line-height: 32px;
    outline: 0;
    padding: 0 11px;
    transition: var(--el-transition-border);
    width: 250px;
  }
  /deep/.el-form-item:first-of-type .el-input__inner {
    padding-left: 30px;
  }

  .userimg {
    padding-top: 30px;
    margin: auto;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: thistle;
  }

  /deep/ .el-form-item__label {
    left: 790px;
    top: 433px;
    width: 57px;
    height: 20px;
    color: rgba(127, 127, 127, 100);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }
}

::v-deep input {
  border: 1px solid #f5f8fb;
  background: #f5f8fb;
}

.day {
  cursor: pointer;
}

.father {
  display: flex;
  justify-content: center;
  align-items: center;

  .card {
    width: 100%;
    background-color: #eaf2fa;

    .card-header {
      padding: 10px 24px;
      font-size: 20px;
      font-weight: 600;
      color: #4d62a5;
      border-bottom: 1px solid #eaedf5;

      span {
        letter-spacing: 2px;
      }
    }

    .card-white {
      padding: 26px;
    }
  }
}

.inputform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;

  div {
    font-size: 14px;
  }

  input {
    width: 200px;
    height: 24px;
    border: 1px solid #d8d8d8;
    padding: 1px 3px;
    border-radius: 4px;
    margin: 0 5px;
  }
}

.inputformbr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;

  div {
    margin-left: 10px;
    font-size: 14px;
  }

  input {
    width: 90px;
    height: 24px;
    border: 1px solid #d8d8d8;
    padding: 1px 3px;
    border-radius: 4px;
    // margin: 0 5px;
  }
}

/deep/ .el-card__body {
  padding: 20px 0;
}

.mod {
  border-bottom: 1px solid #eaedf5;
  margin: 0 24px;

  .el-table {
    :deep(.el-table__header) {
      width: 100% !important;

      thead th {
        text-align: center;
      }
    }

    :deep(.el-table__body) {
      width: 100% !important;

      tbody td {
        text-align: center;
      }
    }
  }
}

.el-table-file::-webkit-scrollbar {
  // display: none; /* Chrome Safari */
  width: 5px;
}

.el-table-file {
  margin-top: 10px;
  -ms-scroll-limit: none; // 火狐
  max-height: 150px;
  overflow-y: auto;
  // overflow-x:hidden;
  padding: 0 !important;

  // textarea {
  //   width: 100%;
  // }
}

.fileItem {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  // padding: 0 20px;
  margin: 0 20px;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  font-family: "Microsoft YaHei";
}
.fileItem:last-child {
  border-bottom: none;
}
.fileItem > span {
  font-size: 16px;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 15px 0;

  span {
    font-size: 16px;
    font-weight: 600;
    color: #7f7f7f;
  }

  .btn {
    width: 104px;
    height: 30px;
    color: #fff;
    margin-left: 10px;
    background-color: #b4c7e7;
  }

  .area {
    display: flex;
  }
}

.icon {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    margin-left: 180px;
    font-size: 14px;
  }
}

.car {
  padding-left: 42px;
}

.crux {
  display: flex;
}

.el-upload {
  div {
    font-size: 15px;
    color: #4d62a5;
    display: flex;
    align-items: center;
  }

  .icon-yunshangchuan_o:before {
    font-size: 22px;
  }
  .yunshangchuan-msg {
    color: #7f7f7f !important;
    font-size: 12px;
  }
}

.inputs {
  padding-top: 10px;
  position: relative;

  & > span {
    position: absolute;
    right: 5px;
    top: 10px;
    z-index: 10;
    font-size: 22px;
    color: #4d62a5;
  }
  :deep(.el-textarea) {
    border: 1px solid #eaf2fa;

    textarea {
      resize: none;
      height: 100px;
      width: 100%;
    }
  }

  :deep(.el-textarea__inner)::-webkit-scrollbar {
    width: 5px;
    height: 20px;
    background: #eee;
  }

  :deep(.el-textarea__inner)::-webkit-scrollbar-thumb {
    background: #4d62a5;
    border-radius: 5px;
  }
}

.energy {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;

  p {
    font-size: 14px;
    text-align: left;
    padding-bottom: 10px;
  }

  .energy_form {
    margin: 8px;

    .date {
      margin-left: 66px;

      :deep(.el-form-item__content) {
        width: 200px;
      }
    }
    .summer {
      .rmb {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        div {
          font-size: 14px;
        }

        input {
          width: 80px;
          height: 24px;
          border: 1px solid #d8d8d8;
          padding: 1px 3px;
          border-radius: 4px;
          margin: 0 5px;
        }
      }
    }
  }
}

.color {
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;

  .fpg {
    margin-left: 25px;
    width: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.day {
  display: flex;
  justify-content: space-between;

  .hour {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0070c0;
    text-align: center;
    line-height: 20px;
  }

  .hour1 {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #f79646;
    text-align: center;
    line-height: 20px;
  }

  .hour2 {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #d6ebfa;
    text-align: center;
    line-height: 20px;
  }

  .shi {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
  }
}
</style>
